<template>
    <div class="container">
        <div class="nav">
            <div class="time">{{ now }}</div>
            <div class="city" @click="state.show = true">切换城市</div>
        </div>
        <div class="city-info">
            <p class="city">{{ state.city }}</p>
            <p class="weather">{{state.today.weather}}</p>
            <h2 class="temp">
                <em>{{ state.today.temperature}}</em>℃
            </h2>
            <div class="detail">
                <span>风力{{state.today.windPower}}级</span>|
                <span>风向：{{state.today.windDirection}}风</span>|
                <span>空气湿度：{{state.today.humidity}}%</span>
            </div>
        </div>
        
        <div class="future" v-if="state.future.length">
            <div class="group">
                明天:
                <span class="tm">白天:{{state.future[1].dayTemp}}℃ {{state.future[1].dayWeather}} {{state.future[1].dayWindDir}}风 {{state.future[1].dayWindPower}}级</span>
                <span class="tm">夜间:{{state.future[1].nightTemp}}℃ {{state.future[1].nightWeather}} {{state.future[1].nightWindDir}}风 {{state.future[1].nightWindPower}}级</span>
            </div>
            <div class="group">
                后天:
                <span class="tm">白天:{{state.future[2].dayTemp}}℃ {{state.future[2].dayWeather}} {{state.future[2].dayWindDir}}风 {{state.future[2].dayWindPower}}级</span>
                <span class="tm">夜间:{{state.future[2].nightTemp}}℃ {{state.future[2].nightWeather}} {{state.future[2].nightWindDir}}风 {{state.future[2].nightWindPower}}级</span>
            </div>
         </div>
         <!-- ref = "echartsWrap" vue中获取html的方法 -->
         <div class="echarts-wrap" ref = "echartsWrap"> 

         </div>


        <van-action-sheet v-model:show="state.show">
        <div class="content"> 
            <van-area title="地区" :area-list="areaList":columns-num="2" 
            @confirm="selectCity" @cancel="state.show = false"/>
        </div>
        </van-action-sheet>
    </div>
    
</template>

<script setup>
    import {reactive, ref, onMounted,nextTick} from 'vue'
    import { areaList } from '@vant/area-data';
    import * as echarts from 'echarts';
    

    let now = ref('00:00:00')
    
    const state = reactive({
        city: '',
        today:{},
        show: false,
        future:[]
    })

    setInterval(() => {
        now.value = new Date().toLocaleTimeString() //new Date().toLocaleTimeString() 需注意
    }, 1000)

    AMap.plugin('AMap.CitySearch', function () {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(function (status, result) {
        if (status === 'complete' && result.info === 'OK') {
        // 查询成功，result即为当前所在城市信息
        console.log(result);
            state.city = result.city;
            getWeather(result.city); 
        }
        })
    })

    const getWeather = (city) =>{
        //加载天气查询插件
        AMap.plugin("AMap.Weather", function () {
        //创建天气查询实例
        var weather = new AMap.Weather();
        //执行实时天气信息查询
        weather.getLive(city, function (err, data) {
            console.log(err, data);
            state.today = data;
            //err 正确时返回 null
            //data 返回实时天气数据，返回数据见下表
        });
        weather.getForecast(city, function (err, data) {
        console.log(err, data);
        state.future = data.forecasts;
        //nextTick 保证内部的逻辑会在页面渲染完毕后执行
        nextTick(()=>{
        initEcharts(state.future)
        })
        //err 正确时返回 null
        //data 返回天气预报数据，返回数据见下表
    });
    
        
    })
    }

    const selectCity = ( {selectedOptions}) =>{
        console.log( selectedOptions[1].text);
        state.city = selectedOptions[1].text;
        getWeather(selectedOptions[1].text);
        state.show = false;
    }

    const echartsWrap = ref(null)

    const initEcharts = (arr) =>{
        // console.log(echartsWrap.value);
        let myChart = echarts.init(echartsWrap.value)
        myChart.setOption({
        tooltip: {},
        xAxis: {
        data: ['今天', '明天', '后天', '大后天']
         },
        yAxis: {},
        series: [
        {
            name: '温度',
            type: 'line',
            data: state.future.map(item=>{
                return item.dayTemp
            })
            }
        ]
    }) 
    }
    // onMounted(() => {
    //     initEcharts()
    // })

</script>

<style lang="css" scoped>
    .container{
        min-height: 100vh;
        background: #000;
        opacity: 0.7;
        color: #fff;        
    }
    .nav{
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }
    .city-info{
        text-align: center;
    }
    p{
        margin-top: 10px;
    }
    .temp{
        font-size: 26px;
        margin : 10px 0;
    }
    .temp em{
        font-size: 34px;
    }
    .future{
        margin-top: 30px;
        padding: 0 10px;
    }
    .group{
        height: 44px;
        line-height: 44px;
        background-color: rgba(255,255,255,0.3);
        font-size: 13px;
        padding:0 10px;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    .echarts-wrap{
        width: 100%;
        height: 50vh;
    }
</style>